<template>
    <div class="main">
        <!--backgroundColor!!!!!!!!  -->
        <div class="left" :style="{backgroundColor:themeColor,width:(!isCollapse?'200px':'auto')}">
            <div class="logo">Bing</div>
            <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :background-color="themeColor"
                text-color="#fff"
                active-text-color="#ffd04b"
                :collapse="isCollapse"
                router>
                <!-- router开启路由  element -->
                <el-submenu index="1">
                    <template slot="title">
                    <i class="el-icon-user-solid"></i>
                    <span>账号管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/layout/role">角色管理</el-menu-item>
                        <el-menu-item index="/layout/admin">账号管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                    <i class="el-icon-office-building"></i>
                    <span>产品管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/layout/productUpdate">产品管理</el-menu-item>
                        <el-menu-item index="/layout/integralUpdate">积分管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                    <i class="el-icon-user"></i>
                    <span>反馈投诉</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/layout/complain">反馈投诉</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>
        <div class="right">
            <!-- 右侧顶部导航 -->
            <div class="nav" :style="{backgroundColor:themeColor}">
                <!-- 左侧展开图标 -->
                <div @click='isCollapse=!isCollapse' class="icon">
                    <i :class="!isCollapse?'el-icon-s-fold':'el-icon-s-unfold'"></i>
                </div>
                <!-- 右侧菜单 -->
                <el-menu
                    :default-active="activeIndex2"
                    class="el-menu-demo"
                    mode="horizontal"
                    :background-color="themeColor"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-menu-item index="1"><i class="el-icon-s-home"></i>首页</el-menu-item>
                    <el-menu-item index="2"><i class="el-icon-s-comment"></i>信息</el-menu-item>
                    <el-menu-item index="3"><i class="el-icon-message"></i>邮箱</el-menu-item>
                    <el-submenu index="4">
                        <template slot="title"><i class="el-icon-help"></i>主题</template>
                        <el-menu-item @click='themeChange(item.value)' :index="item.value" v-for="(item,index) in theme" :key="index">{{item.name}}</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title"><i class="el-icon-user-solid"></i>{{admin.name}}</template>
                        <el-menu-item index="5-1">个人中心</el-menu-item>
                        <el-menu-item index="5-2">修改密码</el-menu-item>
                        <el-menu-item index="5-3" @click='exit'>退出系统</el-menu-item>
                    </el-submenu>
                </el-menu>
            </div>
            <!-- end右侧顶部导航 --> 
            <!-- 右侧内容区域 -->
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-lg-8 p-r-0 title-margin-right">
                            <div class="page-header">
                                <div class="page-title">
                                    <h1>Hello, <span>Welcome Here</span></h1>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 p-l-0 title-margin-left">
                            <div class="page-header">
                                <div class="page-title">
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                                        <li class="breadcrumb-item active">Home</li>
                                    </ol>
                                </div>
                            </div>
                        </div>
                    </div>
                    <section id="main-content">
                        <div class="row">
                            <div class="col-lg-3">
                                <div class="card">
                                    <div class="stat-widget-one">
                                        <div class="stat-icon dib"><i class="ti-money color-success border-success"></i></div>
                                        <div class="stat-content dib">
                                            <div class="stat-text">今日收入总额</div>
                                            <div class="stat-digit">234</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card">
                                    <div class="stat-widget-one">
                                        <div class="stat-icon dib"><i class="ti-user color-primary border-primary"></i></div>
                                        <div class="stat-content dib">
                                            <div class="stat-text">当前拥有用户</div>
                                            <div class="stat-digit">21</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card">
                                    <div class="stat-widget-one">
                                        <div class="stat-icon dib"><i class="ti-layout-grid2 color-pink border-pink"></i></div>
                                        <div class="stat-content dib">
                                            <div class="stat-text">产品数量总和</div>
                                            <div class="stat-digit">41</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-3">
                                <div class="card">
                                    <div class="stat-widget-one">
                                        <div class="stat-icon dib"><i class="ti-link color-danger border-danger"></i></div>
                                        <div class="stat-content dib">
                                            <div class="stat-text">套餐兑换商品比例</div>
                                            <div class="stat-digit">53%</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row" >
                            <div id='hh' style="width: 300px;height: 600px" class="col-lg-8">
                            </div>

                            <div class="col-lg-4">
                                <div id='aa' style="width: 500px;height: 300px" class="card">
                                </div>
                                
                            </div>
                        </div>
                    </section>
                </div> -->
                <router-view></router-view>
            </div>
            <!-- end右侧内容区域 -->
        </div>
    </div>
</template>
<style scoped lang="scss">
    @import url("./a/assets/css/lib/calendar2/pignose.calendar.min.css");
    @import url("./a/assets/css/lib/chartist/chartist.min.css");
    @import url("./a/assets/css/lib/font-awesome.min.css");
    @import url("./a/assets/css/lib/themify-icons.css");
    @import url("./a/assets/css/lib/owl.carousel.min.css");
    @import url("./a/assets/css/lib/owl.theme.default.min.css");
    @import url("./a/assets/css/lib/weather-icons.css");
    @import url("./a/assets/css/lib/menubar/sidebar.css");
    @import url("./a/assets/css/lib/bootstrap.min.css");
    @import url("./a/assets/css/lib/helper.css");
    @import url("./a/assets/css/style.css");
.left{
    display: flex;
    flex-direction: column;
    width: 30%;
}
.main{
    width: 100vw;
    height: 100vh;
    display: flex;
}

.logo{ 
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border: 1px solid white;
    margin: 10px;
}


.right{
    flex: 1;
    width: 70%;
}
.nav{
    display: flex;
    justify-content: space-between;
    height: 60px;
}
.icon{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
}
.content{
    padding: 10px;
    width: 100%;
}
</style>
<script>
import {mapState,mapMutations} from 'vuex'
import * as echarts from 'echarts';
export default {

    name: 'Layout',
    components: {
    },
    mounted () {
        var chartDom = document.getElementById('hh');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            xAxis: {
                type: 'category',
                data: ['5G套餐', '30G流量包', '60G流量包', '100元话费', '50元话费', '20元话费', '20G流量包']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [12, 20, 15, 8, 7, 11, 13],
                type: 'bar'
            }]
        };

        option && myChart.setOption(option);

        var chartDom1 = document.getElementById('aa');
        var myChart1 = echarts.init(chartDom1);
        var option1;

        option1 = {
            title: {
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: 21, name: '用户'},
                        {value: 4, name: '管理员'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option1 && myChart1.setOption(option1);
    },
    data() {
        return {
            themeColor: localStorage.getItem('theme')?localStorage.getItem('theme'):'#21373d',
            activeIndex: '1',
            activeIndex2: '1',
            isCollapse: false
        };
    },
    created () {
        //1 直接输入地址跳转   验证是否可以访问  2 登录后拿用户的详细信息
        let loginId = localStorage.getItem('loginId');
        if(!loginId){
            this.$router.push('/login')
            
        }else{
            //拿用户的详细信息
            let res = this.$get('/admin/layout',{loginId})
            this.setAdmin(res)
        }
    },
    computed: {
        ...mapState('theme', ['theme']),
        ...mapState('admin',['admin'])
    },
    
    methods: {
        //导入vuex设置用户信息的方法
        ...mapMutations('admin',['setAdmin']),
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        },
        themeChange(params){
            console.log(params);
            localStorage.setItem('theme',params)
            this.themeColor=params
        },
        //退出系统
        exit(){
            localStorage.clear()
            sessionStorage.clear()
            this.$router.push('/')
        }
    }
}
</script>